Defining Expand/Collapse Sections (Drop-Down Hotspots)
You can create sections of content that expand and collapse when you click a link or hot spot. This structure allows you to create items, such as bulleted lists, that are easy to scan, and then the users can expand individual items to get additional information. You can also use this structure to provide definitions.
When you identify the paragraph styles to start expand/collapse sections, you define whether those sections should initially be expanded (shown) or collapsed (hidden). ePublisher inserts an image indicating the state of the link. When a user clicks on a hotspot with the initial content collapsed, the content expands under the hotspot. If the user clicks a second time on the hotspot, the content is hidden again.
Using Styles and Markers for Expand/Collapse Sections
To use expand/collapse sections, you need the paragraph styles you want to start these sections, and you need the DropDownEnd marker in your source documents. Decide which paragraph styles should provide the link and start an expand/collapse section. For example, you could make Heading 4, Procedure Title, and Bullet Expand paragraph styles start expand/collapse sections.
To enable expand/collapse sections in your Stationery
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. On the Project menu, click a target in the Active Target menu option that is an output format that supports this option.
  4. In Paragraph Styles, select the paragraph style you want to define as the link for the start of an expand/collapse section.
  5. On the Options tab, set Dropdown to Start open or Start closed, based on whether you want the expand/collapse section to be displayed or hidden by default.
  6. On the Options tab, set Dropdown toggle icon position to Left or Right, based on whether you want the expand/collapse button to be on the left or right of your paragraphs.
  7. Repeat steps 3-4 for each paragraph style you want to start expand/collapse sections.
When writers use these styles, they can identify the end of each expand/collapse section with the DropDownEnd marker. All other paragraph styles should have the Dropdown option set to Continue to be included in the expand/collapse sections as needed.
Modifying Images for Expand/Collapse Sections
You can replace the default images ePublisher uses to indicate the state of an expanded or collapsed hotspot. For more information about override files and locations, see Stationery, Projects, and Overrides.
To modify expand/collapse images
  1. If you want to override the images for an output format, complete the following steps:
    1. In your Stationery design project, on the View menu, click Format Override Directory.
    2. Create the Formats\<formattype>\Files\images folder in your project folder, where formattype is the name of the output format to override, such as Dynamic HTML.
  2. If you want to override the images for a target, complete the following steps:
    1. In your Stationery design project, on the View menu, click Target Override Directory.
    2. Create the Targets\<targetname>\Files\images folder in your project folder, where targetname is the name of the target you want to override.
  3. Paste the .gif files you want to use with names identical to those you want to replace in the Images folder you created. The following table lists the default images and their file names and sizes.
    Image
    Image Name
    Image Size
    expanded.gif
    Width: 8 px (0.111 inch) Height: 6 px (0.083 inch)
    collapse.gif
    Width: 6 px (0.083 inch) Height: 8 px (0.111 inch)
    Note: If you are generating with WebWorks Reverb output, you will modify the expand/collapse images in the skin.png file located in Pages\images in the Format or Target override directory for this output. For more information, See "Changing the Appearance of WebWorks Reverb".
  4. Regenerate your project to review the changes.
Was this helpful?
Last modified date: 01/28/2026